<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '230px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      color:''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch:{
    theme(n) {
    return n
    },
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  computed:{
    theme() {
      return this.$store.state.settings.theme?'#fff':'#333';
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart = echarts.init(this.$el, 'macarons');
      var color=this.theme;
       var titleData=[];
      for(var i in data.list){
        titleData.push(data.list[i].name +' '+(data.list[i].value/parseInt(data.total)) * 100 +'%')
      }
      let bgColor = '#fff';
      this.chart.setOption({
        title: {
          zlevel: 0,
          text: [
              '{value|' + data.total + '}',
              '{name|' + data.name2 + '}',
          ].join('\n'),
          top: '35%',
          left: '49%',
          textAlign: 'center',
          textStyle: {
              rich: {
                  value: {
                      color:"#fff",
                      fontSize: 24,
                      fontWeight: 'bold',
                      lineHeight: 36,
                      textShadowColor:'#00f2ff',
                      textShadowBlur:30
                  },
                  name: {
                      color: '#B6E6FF',
                      fontSize: 14,
                      lineHeight: 20
                  },
              },
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: false,
          right: 30,
          top:'center',
          orient: 'vertical',
          icon: "circle",
          itemGap:20,
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            borderRadius:10, 
            color:'#b6e6ff',
            fontSize:14,
            rich: {
                name: {
                    verticalAlign: 'right',
                    align: 'left',
                    width: 70,
                    fontSize: 14
                },
                value: {
                    align: 'right',
                    width: 70,
                    fontSize: 20,
                    textShadowBlur:30,
                    textShadowColor:'#00f2ff'
                }
            }
          },
          data: data.list.map(item => item.name),
          formatter: function(name) {
            let className = 'upRate'
            if (data.list && data.list.length) {
                for (var i = 0; i < data.list.length; i++) {
                  if (name === data.list[i].name) {
                        return (
                            '{name| ' +
                            name +
                            '}' +
                            '{value| ' +
                            (data.total> 0?(data.list[i].value/data.total*100).toFixed(2):0)+
                            '%}'
                        )
                    }
                }
            }
        }
        },
        series: [
          {
            name: data.name,
            type: 'pie',
            // roseType: 'radius',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            data: data.list,
            hoverAnimation:false,
            itemStyle: {
                normal: {
                    borderColor: '#0c1c34',
                    borderWidth: 2
                }
            },
            label: {
                show: true,
                formatter: '{b}{d}%',
                textStyle:{fontSize: '16'}
                // position: 'center'
            },
            labelLine: {
                show: true
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                }
            },
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
